{% extends '_base_list.html' %}

{% block title %}
    作业中心
{% endblock %}


{% block top_css %}
    {{ super() }}
    <!-- dropzone -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/dropzone/dropzone.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

    <style>
        .file-upload {
            mix-height: 198px;
            width: 430px;
            background-color: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4001;
            box-shadow: 0 1px 30px rgba(0, 0, 0, 0.6);
            display: none;
        }

        .file-upload .title {
            padding: 0 5px;
            height: 28px;
            line-height: 28px;
            background-color: #1a2b3c;
            font-size: 12px;
        }

        .file-upload .dropbox {
            padding: 10px;
            min-height: 170px;
            box-sizing: border-box;
        }

        .dropzone, .dropzone-container {
            padding: 10px;
        }

        .dropzone .dz-message,
        .dropzone-container .dz-message {
            margin: 0 !important;
        }

        .dropzone .dz-preview,
        .dropzone-container .dz-preview {
            margin: 0 4px 8px;
        }
    </style>

{% endblock %}


<!-- Content head -->
{% block head_title %}
    作业中心
{% endblock %}
{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">实时任务</a></li>
        <li class="active">角色执行</li>
    </ol>
{% endblock %}


<!-- Content body -->
{% block title_filter %}
    <div class="filter">
        <div class="row">
            <div class="col-xs-12 col-sm-2">
                <div class="form-group">
                    <input type="text" class="form-control" name="create_time" placeholder="请选择创建时间" autocomplete="off">
                </div>
            </div>

            <div class="col-xs-12 col-sm-3 pull-right">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" name="search" placeholder="请输入角色名称" class="form-control">
                        <span class="input-group-btn">
                            <button name="search" class="btn btn-mint" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="fUpload" class="file-upload">
        <div class="title">
            <span class="pull-left">上传文件</span>
            <span class="pull-right" onclick="closeUploadDialog();"><a href="#"><i class="fa fa-close" aria-hidden="true"></i></a></span>
        </div>
        <div class="dropbox">
            <div id="fileDropzone" class="dropzone dz-clickable">
                <div class="dz-default dz-message">
                    <div class="dz-icon">
                        <i class="fa fa-cloud-upload fa-5x"></i>
                    </div>
                    <div>
                        <span class="dz-text">请把文件拖拽到此或者点击此区域</span>
                        <p class="text-sm text-muted">支持的文件类型.zip</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_operator %}
    <div class="operator mar-btm">
        <div class="row">
            <div class="col-xs-12 text-center">
                {% if current_user.has_perm('tasks-role-create') %}
                    <button class="btn btn-primary btn-sm" id="add"><i class=""></i> 新增角色</button>
                {% endif %}
                {% if current_user.has_perm('tasks-role-update') %}
                    <button class="btn btn-mint btn-sm" id="edit"><i class=""></i> 修改角色</button>
                {% endif %}
                {% if current_user.has_perm('tasks-role-delete') %}
                    <button class="btn btn-danger btn-sm" id="del"><i class=""></i> 删除角色</button>
                {% endif %}
                {% if current_user.has_perm('tasks-role-detail') %}
                    <button class="btn btn-info btn-sm" id="detail"><i class=""></i> 角色详情</button>
                {% endif %}
                {% if current_user.has_perm('tasks-role-upload') %}
                    <button class="btn btn-warning btn-sm" id="upload"><i class=""></i> 上传角色</button>
                {% endif %}
                {% if current_user.has_perm('tasks-role-execute') %}
                    <button class="btn btn-purple btn-sm" id="execute"><i class=""></i> 执行角色</button>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block body_table %}
   <table id="roleTable" class="table table-auto">
   </table>
{% endblock %}


{% block buttom_js %}
    {{ super() }}
    <!-- dropzone -->
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/dropzone/dropzone.js') }}"></script>
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>

    <script type="text/javascript">
        //文件上传
        var fDropzone = null;
        function openUploadDialog() {
            fDropzone.removeAllFiles();
            // 已经打开
            var display =$('#fUpload').css('display');
            if(display =='block'){
                return
            }

            $("#fUpload").show();
        }

        function closeUploadDialog() {
            fDropzone.removeAllFiles();
            $("#fUpload").hide();
        }

        function uploadFile() {
            Dropzone.autoDiscover = false;
            var url = "{{ url_for('tasks.role-upload', pk=id) }}";
            var acceptedFiles = ['.zip'];
            fDropzone = new Dropzone("#fileDropzone", {
                url: url,
                addRemoveLinks: false,
                method: 'post',
                filesizeBase: 1024,
                uploadMultiple: false,
                acceptedFiles: acceptedFiles.join(','),
                dictInvalidFileType: '上传文件类型不允许',
                addedfile: function (file) {
                    var fileArr = file.name.split('.');
                    var fileExt = '.' + fileArr[fileArr.length-1];
                    if($.inArray(fileExt.trim(), acceptedFiles) < 0){
                        bees.tipError({
                            message: '上传文件类型不允许'
                        });
                        return false
                    }
                },
                sending: function(file, xhr, formData) {
                    //向后台发送自定义的参数
                    formData.append("filesize", file.size);
                    var csrftoken = $('meta[name=csrf-token]').attr('content');
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                success: function (file, results) {
                    closeUploadDialog();
                    if (results.code === 200) {
                        bees.tipSuccess({
                            message: '文件上传成功'
                        });
                        // reload table
                        table.bt.bootstrapTable('refresh');
                    } else {
                        if(results.data.message){
                            bees.tipError({
                                message: results.data.message
                            });
                        }else {
                            bees.tipError({
                                message: '文件上传失败'
                            });
                        }
                    }
                },
                error: function (file, response, e) {
                }
            });
        }

        uploadFile();

        var table = null;
        $(function () {
            bees.initDaterangepicker($('input[name="create_time"]'),{
                opens: "right",
                timePicker: false,
                timePickerSeconds: false,
                singleDatePicker: false,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            // 回填和初始化默认过滤参数
            var createTimeEle = $("input[name='create_time']");
            var searchEle = $('input[name="search"]');

            var filterParams = JSON.parse(window.sessionStorage.getItem("filterParams"));
            if(filterParams){
                // 回填表单过滤条件
                createTimeEle.val(filterParams.create_time);
                searchEle.val(filterParams.search);
                window.sessionStorage.removeItem("filterParams");
            }else {
                // 默认表单过滤条件
                filterParams = {
                    'create_time': createTimeEle.val(),
                    'search': searchEle.val()
                };
            }
            $.fn.beesTable.defaultFilterParams(filterParams);

            // 初始化表格
            var $tableEle = $("#roleTable");
            var options = {
                columns: [
                    {title: '', field: 'selected', radio: true},
                    {title: '名称', field: 'name', sortable: false},
                    {title: '标识', field: 'code', sortable: false},
                    {title: '描述', field: 'desc', sortable: false},
                    {title: '创建人', field: 'create_by'},
                    {title: '创建时间', field: 'create_time', sortable: true}
                ],
                url:'{{ url_for("tasks.api-role-list") }}',
                sortName: 'create_time',
                sortOrder: 'desc'
            };
            table = $tableEle.beesTable(options);

            // 搜索
            bees.bindTableSearch({
                table: $tableEle,
                searches: [
                    {eventType:'change', eventSource:createTimeEle, data:function () {
                            return {'create_time': createTimeEle.val()};
                        }
                    },
                    {eventType:'click', eventSource:$('button[name="search"]'), data: function () {
                            return {'search': searchEle.val()}
                        }
                    }
                ]
            });

            // 操作
            bees.bindTableOperator({
                table: $tableEle,
                operator: {
                    add: {
                        href: '{{ url_for('tasks.role-create') }}'
                    },
                    show: {
                        disable: true
                    },
                    edit: {
                        href: '{{ url_for('tasks.role-update', pk=default_pk) }}'
                    },
                    del: {
                        confirmCallback: function (data) {
                            setAjaxCSRFToken();
                            $.ajax({
                                type: 'post',
                                url: '{{ url_for("tasks.role-delete", pk=default_pk) }}'.replace(bees.defaultPK, data.id),
                                data : {},
                                success: function (result) {
                                    if (result.code != 200) {
                                        bees.tipError({
                                            message: result.data.message
                                        });
                                    }else {
                                       bees.tipSuccess({
                                            message: "删除成功"
                                        });
                                    }

                                    //reload
                                    table.bt.bootstrapTable('refresh');
                                }
                            })
                        }
                    },
                    detail: {
                        ele: $('#detail'),
                        msg: "请选择需要编辑的角色",
                        href: '{{ url_for("tasks.role-detail", pk=default_pk) }}'
                    }
                }
            });

            // 执行角色
            $("#execute").on('click', function () {
                window.location.href = '{{ url_for("tasks.role-execute") }}';
            });

                    
            // 上传角色
            $("#upload").on('click', function () {
                openUploadDialog()
            });

        })
    </script>
{% endblock %}
